<template>
  <el-dialog v-model="props.warningDialog" title="备件预警列表">
    <el-tabs v-model="activeName" class="demo-tabs">
      <el-tab-pane label="备件预警库存" name="1">
        <Table
          ref="tableRef"
          v-bind="state.tableData"
          class="table-demo"
          @pageChange="onTablePageChange"
          @listenClick="listenClick"
        >
          <template #default="{ slotData, slotColumn }">
            <div v-if="slotColumn.key === 'checkStatus'">
              {{
                slotData.checkStatus == 0
                  ? '待点检'
                  : slotData.checkStatus == 1
                  ? '点检中'
                  : slotData.checkStatus == 2
                  ? '点检完成'
                  : slotData.checkStatus == 9
                  ? '已取消'
                  : ''
              }}
            </div>
          </template>
        </Table>
      </el-tab-pane>
      <el-tab-pane label="备件过期预警" name="2">
        <Table
          ref="tableRef"
          v-bind="state.tableData2"
          class="table-demo"
          @pageChange="onTablePageChange2"
          @listenClick="listenClick2"
        >
          <template #default="{ slotData, slotColumn }">
            <div v-if="slotColumn.key === 'checkStatus'">
              {{
                slotData.checkStatus == 0
                  ? '待点检'
                  : slotData.checkStatus == 1
                  ? '点检中'
                  : slotData.checkStatus == 2
                  ? '点检完成'
                  : slotData.checkStatus == 3
                  ? '逾期未点检'
                  : slotData.checkStatus == 9
                  ? '已取消'
                  : ''
              }}
            </div>
            <div v-else-if="slotColumn.key === 'checkResult'">
              {{
                slotData.checkResult == 1
                  ? '正常'
                  : slotData.checkResult == 2
                  ? '异常'
                  : '-'
              }}
            </div>
          </template>
        </Table>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>
<script setup lang="ts">
import { ref, reactive, defineAsyncComponent } from 'vue'
const Table = defineAsyncComponent(
  () => import('/@/components/table/index.vue')
)
const props = defineProps({
  warningDialog: Boolean
})
const emit = defineEmits(['cancelVersion'])

const activeName = ref('1')

const tableRef = ref<RefType>()
const state = reactive<any>({
  tableData: {
    flash: false, // 刷新表格
    // 表头内容（必传，注意格式）
    header: [
      {
        key: 'taskOrderNum',
        colWidth: '200',
        title: '点检工单号',
        type: 'text'
      },
      { key: 'deviceNum', colWidth: '', title: '设备编号', type: 'text' },
      { key: 'deviceName', colWidth: '', title: '设备名称', type: 'text' },
      { key: 'seatNum', colWidth: '', title: '位置号', type: 'text' },
      { key: 'checkTypeName', colWidth: '', title: '点检类型', type: 'text' },
      {
        key: 'planBeginDate',
        colWidth: '170',
        title: '计划开始时间',
        type: 'text'
      },
      {
        key: 'factBeginDate',
        colWidth: '170',
        title: '实际开始时间',
        type: 'text'
      },
      { key: 'checkUserName', colWidth: '', title: '点检人', type: 'text' },
      { key: 'checkStatus', colWidth: '', title: '任务状态', type: 'slot' }
    ],
    columnBtn: [],
    // 配置项（必传）
    config: {
      listApi: '/device/mobile/deviceCheckTask/webPageList',
      listHttp: 'post',
      total: 0, // 列表总数
      loading: true, // loading 加载
      noPage: false, // 是否分页
      isSerialNo: true, // 是否显示表格序号
      isSelection: false, // 是否显示表格多选
      isOperate: false, // 是否显示表格操作栏
      isExtend: false // 是否可以扩展
    },
    // 搜索参数
    param: {
      checkedFlag: 0 // 必传参数，分页的不要传
    }
  },
  tableData2: {
    flash: false, // 刷新表格
    // 表头内容（必传，注意格式）
    header: [
      { key: 'taskOrderNum', colWidth: '', title: '点检工单号', type: 'text' },
      { key: 'deviceNum', colWidth: '', title: '设备编号', type: 'text' },
      { key: 'deviceName', colWidth: '', title: '设备名称', type: 'text' },
      { key: 'seatNum', colWidth: '', title: '位置号', type: 'text' },
      { key: 'checkTypeName', colWidth: '', title: '点检类型', type: 'text' },
      {
        key: 'factBeginDate',
        colWidth: '180',
        title: '点检开始时间',
        type: 'text'
      },
      {
        key: 'factEndDate',
        colWidth: '180',
        title: '点检结束时间',
        type: 'text'
      },
      { key: 'checkUserName', colWidth: '', title: '点检人', type: 'text' },
      { key: 'checkStatus', colWidth: '', title: '任务状态', type: 'slot' },
      { key: 'checkResult', colWidth: '', title: '点检结果', type: 'slot' },
      { key: 'checkFee', colWidth: '', title: '费用(元)', type: 'text' }
    ],
    // 配置项（必传）
    config: {
      listApi: '/device/mobile/deviceCheckTask/webPageList',
      listHttp: 'post',
      total: 0, // 列表总数
      loading: true, // loading 加载
      noPage: false, // 是否分页
      isSerialNo: true, // 是否显示表格序号
      isSelection: false, // 是否显示表格多选
      isOperate: false, // 是否显示表格操作栏
      isExtend: false // 是否可以扩展
    },
    // 搜索参数
    param: {
      checkedFlag: 1 // 必传参数，分页的不要传
    }
  }
})

// 初始化列表数据
const getTableData = () => {
  state.tableData.flash = !state.tableData.flash
}

// 分页改变时回调
const onTablePageChange = (page: TableDemoPageType) => {
  state.tableData.param.pageNum = page.pageNum
  state.tableData.param.pageSize = page.pageSize
  getTableData()
}
// 初始化列表数据
const getTableData2 = () => {
  state.tableData2.flash = !state.tableData2.flash
}

// 分页改变时回调
const onTablePageChange2 = (page: TableDemoPageType) => {
  state.tableData2.param.pageNum = page.pageNum
  state.tableData2.param.pageSize = page.pageSize
  getTableData2()
}

const objFun = {}

// 监听子级表格  传过来的方法
const listenClick = (name: string, val: any) => {
  objFun[name](val)
}

const objFun2 = {}

// 监听子级表格  传过来的方法
const listenClick2 = (name: string, val: any) => {
  objFun2[name](val)
}
</script>
<style scoped lang="scss"></style>
